<!DOCTYPE html>
<html>
<head>
    <title>课程中心</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <!-- head 中 -->
    <link rel="stylesheet" href="https://cdn.bootcss.com/weui/1.1.2/style/weui.min.css">
    <link rel="stylesheet" href="https://cdn.bootcss.com/jquery-weui/1.2.0/css/jquery-weui.min.css">
    <link href="../css/swiper.min.css" rel="stylesheet" />
    <link href="../css/main.css" rel="stylesheet" />


</head>
<body>

    <div class="nav">
        <!-- <span onclick="history.go(-1)">
            <img src="../img/arrow-left.png" />
        </span> -->
        <span>课程中心</span>
        <span id="btn-nav">导航</span>
    </div>

    <!--http://39.104.67.0:8443/ehome/ehome.html 党群E家
    http://39.104.67.0:8443/ehome/personnel.html 人才直通车-->
    <div class="weui-skin_android" id="androidActionsheet" style="display:none">
        <div class="weui-mask" style="visibility:visible; opacity:0.5"></div>
        <div class="weui-actionsheet">
            <div class="weui-actionsheet__menu">
                <div class="weui-actionsheet__cell" onclick="location.href='index.html'">课程中心</div>
                <!-- <div class="weui-actionsheet__cell" onclick="location.href='map.html'">党建大数据</div>
                <div class="weui-actionsheet__cell" onclick="location.href = 'http://39.104.67.0:8443/ehome/ehome.html'">党群E家</div> -->
                <div class="weui-actionsheet__cell" onclick="location.href='center.html'">考试中心</div>
                <!-- <div class="weui-actionsheet__cell" onclick="location.href='jianguan.html'">驻村云监管</div> -->
                <!-- <div class="weui-actionsheet__cell" onclick="location.href = 'http://39.104.67.0:8443/ehome/personnel.html'">人才直通车</div> -->
                <div class="weui-actionsheet__cell" onclick="location.href='user.html'">个人信息</div>
            </div>
        </div>
    </div>
    <!-- Swiper -->
    <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide">
                <img src="../img/banner1.png" />
            </div>
            <div class="swiper-slide">
                <img src="../img/banner2.png" />
            </div>
            <div class="swiper-slide">
                <img src="../img/banner1.png" />
            </div>

        </div>
        <!-- Add Pagination -->
        <div class="swiper-pagination"></div>
    </div>
    <div class="weui-grids">
        <a href="indexList.html?type_id=1" class="weui-grid js_grid">
            <div class="weui-grid__icon" style="background:#F1514B">
                <img src="../img/办公.png" />
            </div>
            <p class="weui-grid__label">
                选修
            </p>
        </a>
        <a href="indexList.html?type_id=2" class="weui-grid js_grid">
            <div class="weui-grid__icon" style="background:#71AAFA">
                <img src="../img/职业.png" />

            </div>
            <p class="weui-grid__label">
                必修
            </p>
        </a>
        <a href="indexList.html?type_id=3" class="weui-grid js_grid">
            <div class="weui-grid__icon" style="background:#54CED4">
                <img src="../img/产品.png" />

            </div>
            <p class="weui-grid__label">
                付费
            </p>
        </a>
        <a href="indexList.html?type_id=1" class="weui-grid js_grid">
            <div class="weui-grid__icon" style="background:#3BA3F8">
                <img src="../img/生活.png" />

            </div>
            <p class="weui-grid__label">
                选修
            </p>
        </a>
        <a href="indexList.html?type_id=2" class="weui-grid js_grid">
            <div class="weui-grid__icon" style="background:#9FCB87">
                <img src="../img/工具.png" />
            </div>
            <p class="weui-grid__label">
                必修
            </p>
        </a>
        <a href="indexList.html?type_id=3" class="weui-grid js_grid">
            <div class="weui-grid__icon" style="background:#F2A04B">

                <img src="../img/other.png" />
            </div>
            <p class="weui-grid__label">
                付费
            </p>
        </a>

    </div>

    <!-- <div class="weui-cells__title info">
        <span class="title">特别推荐</span>
        <span class="alert">2018-07-18 08:20 有<i>1</i>部更新</span>

    </div> -->

    <!-- <div class="weui-search-bar" id="searchBar">
        <form class="weui-search-bar__form">
            <div class="weui-search-bar__box">
                <i class="weui-icon-search"></i>
                <input type="search" class="weui-search-bar__input" id="searchInput" placeholder="搜索" required="">
                <a href="javascript:" class="weui-icon-clear" id="searchClear"></a>
            </div>
            <label class="weui-search-bar__label" id="searchText">
                <i class="weui-icon-search"></i>
                <span>搜索需要的课程</span>
            </label>
        </form>
        <a href="javascript:" class="weui-search-bar__cancel-btn" id="searchCancel">取消</a>
    </div> -->

    <!-- <div id="articleList"> -->

        <!--<div class="weui-flex list">
            <div class="weui-flex__item">
                <div class="item">
                    <a class="cover" href="detail.html">
                        <img src="../img/item1.png" />
                    </a>
                    <a class="title" href="#">六枝特区倡导党员快乐…</a>
                    <div class="comments weui-flex">
                        <div class="star weui-flex__item">
                            <img src="../img/star.png" />
                            <img src="../img/star.png" />
                            <img src="../img/star.png" />
                            <img src="../img/star.png" />
                            <img src="../img/star0.png" />
                        </div>
                        <div class="users weui-flex__item">
                            <img src="../img/users.png" />
                            <span>57165</span>
                        </div>
                    </div>
                </div>

            </div>
            <div class="weui-flex__item">
                <div class="item">
                    <a class="cover" href="detail2.html">
                        <img src="../img/item2.png" />
                    </a>
                    <a class="title" href="#">水城县社区群众的守望者…</a>
                    <div class="comments weui-flex">
                        <div class="star weui-flex__item">
                            <img src="../img/star.png" />
                            <img src="../img/star.png" />
                            <img src="../img/star.png" />
                            <img src="../img/star.png" />
                            <img src="../img/star0.png" />
                        </div>
                        <div class="users weui-flex__item">
                            <img src="../img/users.png" />
                            <span>57165</span>
                        </div>
                    </div>
                </div>
            </div>

        </div>
        <div class="weui-flex list">
            <div class="weui-flex__item">
                <div class="item">
                    <a class="cover" href="detail.html">
                        <img src="../img/item1.png" />
                    </a>
                    <a class="title" href="#">六枝特区倡导党员快乐…</a>
                    <div class="comments weui-flex">
                        <div class="star weui-flex__item">
                            <img src="../img/star.png" />
                            <img src="../img/star.png" />
                            <img src="../img/star.png" />
                            <img src="../img/star.png" />
                            <img src="../img/star0.png" />
                        </div>
                        <div class="users weui-flex__item">
                            <img src="../img/users.png" />
                            <span>57165</span>
                        </div>
                    </div>
                </div>

            </div>
            <div class="weui-flex__item">
                <div class="item">
                    <a class="cover" href="detail2.html">
                        <img src="../img/item2.png" />
                    </a>
                    <a class="title" href="#">水城县社区群众的守望者…</a>
                    <div class="comments weui-flex">
                        <div class="star weui-flex__item">
                            <img src="../img/star.png" />
                            <img src="../img/star.png" />
                            <img src="../img/star.png" />
                            <img src="../img/star.png" />
                            <img src="../img/star0.png" />
                        </div>
                        <div class="users weui-flex__item">
                            <img src="../img/users.png" />
                            <span>57165</span>
                        </div>
                    </div>
                </div>
            </div>

        </div>
        <div class="weui-flex list">
            <div class="weui-flex__item">
                <div class="item">
                    <a class="cover" href="detail.html">
                        <img src="../img/item2.png" />
                    </a>
                    <a class="title" href="#">六枝特区倡导党员快乐…</a>
                    <div class="comments weui-flex">
                        <div class="star weui-flex__item">
                            <img src="../img/star.png" />
                            <img src="../img/star.png" />
                            <img src="../img/star.png" />
                            <img src="../img/star.png" />
                            <img src="../img/star0.png" />
                        </div>
                        <div class="users weui-flex__item">
                            <img src="../img/users.png" />
                            <span>57165</span>
                        </div>
                    </div>
                </div>

            </div>
            <div class="weui-flex__item">
                <div class="item">
                    <a class="cover" href="detail2.html">
                        <img src="../img/item1.png" />
                    </a>
                    <a class="title" href="#">六枝特区倡导党员快乐…</a>
                    <div class="comments weui-flex">
                        <div class="star weui-flex__item">
                            <img src="../img/star.png" />
                            <img src="../img/star.png" />
                            <img src="../img/star.png" />
                            <img src="../img/star.png" />
                            <img src="../img/star0.png" />
                        </div>
                        <div class="users weui-flex__item">
                            <img src="../img/users.png" />
                            <span>57165</span>
                        </div>
                    </div>
                </div>
            </div>

        </div>-->
    <!-- </div> -->
    <!-- body 最后 -->
    <script src="https://cdn.bootcss.com/jquery/1.11.0/jquery.min.js" type='text/javascript' charset='utf-8'></script>
    <script src="https://cdn.bootcss.com/jquery-weui/1.2.0/js/jquery-weui.min.js" type='text/javascript' charset='utf-8'></script>

    <script src="https://g.alicdn.com/dingding/open-develop/1.9.0/dingtalk.js" type='text/javascript' charset='utf-8'></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.2.6/js/swiper.min.js" type='text/javascript' charset='utf-8'></script>
    <script src="../scripts/main.js"></script>
    <!-- Initialize Swiper -->
    <script>


        var swiper = new Swiper('.swiper-container', {
            pagination: {
                el: '.swiper-pagination',
            },
            paginationClickable: true,
            speed: 500,
            loop: true,
            observer: true,
            observeParents: true,
            autoplayDisableOnInteraction: false,
            autoplay: true,

        });

        var html = '<div class="weui-flex list">{{inner}}</div>';
        var innerHtml = '<div class="weui-flex__item">' +
           ' <div class="item">' +
               '<a class="cover" href="detail2.html?id={{id}}">' +
                    '<img src="{{cover}}" />' +
                '</a>' +
                '<a class="title" href="detail{{page}}.html?id={{id}}">{{title}}</a>' +
                '<div class="comments weui-flex">' +
                   ' <div class="star weui-flex__item">' +
                        '<img src="../img/star.png" />' +
                        '<img src="../img/star.png" />' +
                       ' <img src="../img/star.png" />' +
                       ' <img src="../img/star.png" />' +
                       ' <img src="../img/star0.png" />' +
                   ' </div>' +
                    '<div class="users weui-flex__item">' +
                        '<img src="../img/users.png" />' +
                       ' <span>57165</span>' +
                   ' </div>' +
               ' </div>' +
           ' </div>' +
      '  </div>';


        $(function () {

            $.get("http://localhost:8222/article?type_id=72", function (rel) {

                var strHtml = [];
                var strInner = [];

                for (var i = 0; i < rel.rows.length; i++) {
                    var page = "";

                    if (rel.rows[i].urls.length > 0) {
                        page = "";
                    } else {
                        page = "2";
                    }
                    console.log(rel.rows[i])
                    strInner.push(innerHtml.replace("{{page}}", page).replace("{{id}}", rel.rows[i].article_id).replace("{{id}}", rel.rows[i].article_id).replace("{{cover}}", rel.rows[i].cover).replace("{{title}}", rel.rows[i].title));
                    if (i % 2 == 1 || i==rel.rows.length-1) {
                        strHtml.push(html.replace("{{inner}}", strInner.join("")));
                        strInner = [];
                    }
                }
                console.log(strHtml)
                $("#articleList").html(strHtml.join(""));
            });
        });



    </script>
</body>
</html>
